<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import PlayVue from '@/components/icon/Play.vue';
import { useRoute } from "vue-router";
const route = useRoute()
defineProps({
  src: {
    type: String,
    default: ''
  },
  cover: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 40
  },
  radius: {
    type: Number,
    default: 0
  },
})

watch(() => route.query.id, (val) => {
  if (route.path === '/video') {
    onPause()
  }
})

const videoDOm = ref()
const state = reactive({
  isPlay: false
})
const handleClick = () => {
  if (state.isPlay) {
    videoDOm.value.pause()
  } else {
    videoDOm.value.play()
  }
}
const onPlay = () => {
  state.isPlay = true
}
const onPause = () => {
  state.isPlay = false
}
const onEnded = () => {
  state.isPlay = false
}
</script>

<template>
  <div class="video-player">
    <div class="video-tool" @click="handleClick">
      <div class="video-icon" v-show="!state.isPlay">
        <PlayVue color="#fff" :size="size"></PlayVue>
      </div>
    </div>
    <div class="video-palyer-box" :style="{ 'border-radius': radius + 'px' }">
      <video :src="src" :poster="cover" ref="videoDOm" @play="onPlay" @pause="onPause"
        @ended="onEnded">您的浏览器不支持HTML5</video>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .video-tool {
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .video-icon {
      cursor: pointer;
    }
  }

  .video-palyer-box {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    overflow: hidden;

    video {
      width: 100%;
      height: 100%;
      background-color: #222;
      border-radius: 12px;
      // object-fit: fill;
    }
  }
}
</style>
